import React, { Component } from 'react';
import { Table, Row, Col, Button, Form,Input,Tabs,Icon,Modal,notification,Select} from 'antd';
import * as APIService from '../../axios/api';
import {withRouter} from 'react-router-dom';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const { confirm } = Modal;
const { Option } = Select;
//弹出通知提醒框
function openNotification(type, message) {
    notification.open({
        type: type,
        message: message,
        duration: 2,
    });
};

const dateFormat = 'YYYY-MM-DD';
class TableSearch extends Component {
	state = {
		dataSource: [],
		pagination: {
			pageSize: 10,
			current: 1
		},
		loading: false,
		chooseData:'',
		options:[],
		handleType:0,
		columns: [
			{
				title: '序号',
				render:(text,record,index)=> {
					return(
					 `${(this.state.pagination.current-1)*(this.state.pagination.pageSize)+(index+1)}`
					)
				  }
			},
			{
				title: '调用url和路径',
				dataIndex: 'logAddress',
			},
			{
				title: '调用时间',
				dataIndex: 'logTime',
			},
			{
				title: '调用人',
				dataIndex: 'logUserName'
			},
			{
				title: '模块',
				dataIndex: 'logModular'
			},
			{
				title: '传入参数',
				dataIndex: 'logParameter'
			},
			{
				title: '日志类型',
				dataIndex: 'logTypeName'
			},
			{
                title: '操作',
                width:'12%',
				render: (text, record) => {
					return	<span>
			
					  <a  onClick={()=>this.showDeleteConfirm(record,0)}>
						删除
					  </a>
				
					</span>
			}
		}
		]
	};

	componentDidMount() {
		this.fetch('&pageSize=10&pageNum=1');
	}

	componentWillUnmount() {
		this.setState = () => {
			return;
		};
	}
	  
	//弹出删除框
	showDeleteConfirm = (data,type) => {
		const that = this;
		confirm({
			title: type===0?'确认删除' + '[' + data.userName + ']？':'确认重置密码？',
			okText: '确认',
			okType: 'warning',
			cancelText: '取消',
			onOk() {
				if(type===0){
					APIService.deleteUser(data.userId).then(data => {
						openNotification('success', '删除成功');
						
					}).catch(function (error) {
						openNotification('error', error.message);
					});	
				}else{
					APIService.resetPassword(data.userId).then(data => {
						openNotification('success', '重置成功');
					}).catch(function (error) {
						openNotification('error', error.message);
					});	
				}
				that.fetch('');
	
			},
			onCancel() {
				console.log('Cancel');
			},
		});
	}
	fetch = (str) => {
		this.setState({ loading: true });
		APIService.getLogs(str).then(data=>{
			const dataSource=data.data.data.data;
			const pagination = { ...this.state.pagination };
			pagination.onShowSizeChange = (current, pageSize) => {
				pagination.pageSize = pageSize;
				pagination.current = current;
				this.setState({ pagination });
				let str=this.getFormValues()+`&pageNum=${current}&pageSize=${pageSize}`
				this.fetch(str);
			}
			pagination.onChange = (current, pageSize) => {
				pagination.pageSize = pageSize;
				pagination.current = current;
				this.setState({ pagination });
				let str=this.getFormValues()+`&pageNum=${current}&pageSize=${pageSize}`
				this.fetch(str);
			}
			pagination.showQuickJumper = true;
			pagination.total = data.data.data.total;
			pagination.showTotal = total => `共 ${total} 条数据`
		            this.setState({
						dataSource:dataSource,
						loading:false,
						pagination
					})
	
		})
        //查询所有的角色
		APIService.getLogTypes().then(data=>{
			const dataSource=data.data.data;
		            this.setState({
						options:dataSource
					})
			 })

	}

	onSelectedRowKeysChange = selectedRowKeys => {
		this.setState({ selectedRowKeys });
	};

	getFormValues=()=>{
		let str=''
		this.props.form.validateFields((err, values) => {
			for(let key  in values){
				if(values[key]){
					str+=`&${key}=${values[key]}`;
				}
			}
		});
		return str;
	}
	handleSearch = (e) => {
				this.fetch(this.getFormValues());
	};
	
	
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div className="shadow-radius">
				<Form className="search-form" style={{ paddingBottom: 0 }}>
					<Row gutter={24}>
						<Col span={4}>
							<FormItem label="调用人">
								{getFieldDecorator('logUserName')(
									<Input placeholder='请输入调用人' allowClear/>
								)}
							</FormItem>
						</Col>
						<Col span={4}>
							<FormItem label="日志类型">
								{getFieldDecorator('logType')(
									<Select placeholder='请选择日志类型' allowClear>
										{this.state.options.map(data => <Option key={data.logTypeId}>{data.logTypeName}</Option>)}
									</Select>
								)}
							</FormItem>
						</Col>
						<Col span={4}>
							<FormItem label="模块">
								{getFieldDecorator('logModular')(
									<Input placeholder='请输入模块' allowClear/>
								)}
							</FormItem>
						</Col>
						<Col span={2} style={{ marginRight: '10px', display: 'flex' }} className="serarch-btns">
							<FormItem>
								<Button icon="search" type="primary" htmlType="submit" className={'btn'} onClick={this.handleSearch}>
									查询
								</Button>
							</FormItem>
					
						</Col>
					</Row>
				</Form>
				<Tabs>
                        <TabPane tab={<span><Icon type="table" /><strong>日志管理</strong> </span>} key="1">
						<Table  columns={this.state.columns} dataSource={this.state.dataSource} loading={this.state.loading} scroll={{y:500}} pagination={this.state.pagination} rowKey={record => record.logId}  />
                        </TabPane>
                     
                    </Tabs>
					
			
			</div>
		);
	}
}

export default Form.create()(withRouter(TableSearch));
